import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class ShopListController extends GetxController {
  RxInt type = 0.obs;
  RxBool isPai = true.obs;
}

class ShopListPage extends GetView<ShopListController> {
  const ShopListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '商品列表',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
        actions: [
          IconButton(onPressed: () {}, icon: SvgUtils.assetName('u3457', width: 18, height: 18))
        ],
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(40),
            child: Container(
              height: 40,
              color: Colors.white,
              child: Row(
                children: [
                  Expanded(
                      child: Center(
                          child: InkWell(
                    onTap: () {
                      controller.type.value = 1;
                    },
                    child: Obx(
                      () => Text.rich(TextSpan(children: [
                        TextSpan(
                            text: '综合 ',
                            style: StylesUtils.customTextStyle(
                                color: controller.type.value == 1
                                    ? ColorsUtils.colorF048
                                    : ColorsUtils.color6666)),
                        WidgetSpan(
                            child: CustomPaint(
                              size: const Size(10, 6),
                              painter: _MyCustomPainter(controller.type.value == 1),
                            ),
                            alignment: PlaceholderAlignment.middle)
                      ])),
                    ),
                  ))),
                  Expanded(
                      child: Center(
                          child: InkWell(
                    onTap: () {
                      controller.type.value = 2;
                    },
                    child: Obx(
                      () => Text.rich(TextSpan(children: [
                        TextSpan(
                            text: '销量 ',
                            style: StylesUtils.customTextStyle(
                                color: controller.type.value == 2
                                    ? ColorsUtils.colorF048
                                    : ColorsUtils.color6666)),
                        WidgetSpan(
                            child: CustomPaint(
                              size: const Size(10, 6),
                              painter: _MyCustomPainter(controller.type.value == 2),
                            ),
                            alignment: PlaceholderAlignment.middle)
                      ])),
                    ),
                  ))),
                  Expanded(
                      child: Center(
                    child: InkWell(
                      onTap: () {
                        if (controller.type.value == 3) {
                          controller.type.value = 4;
                          return;
                        }
                        if (controller.type.value == 4) {
                          controller.type.value = 3;
                          return;
                        }
                        controller.type.value = 3;
                      },
                      child: Obx(() => Text.rich(TextSpan(
                              text: '价格 ',
                              style: StylesUtils.customTextStyle(
                                  color: [3, 4].contains(controller.type.value)
                                      ? ColorsUtils.colorF048
                                      : ColorsUtils.color6666),
                              children: [
                                WidgetSpan(
                                    child: SizedBox(
                                      width: 10,
                                      height: 16,
                                      child: Column(
                                        children: [
                                          CustomPaint(
                                            size: const Size(10, 6),
                                            painter:
                                                _MyCustomPainter(controller.type.value == 3, true),
                                          ),
                                          Container(
                                            height: 4,
                                          ),
                                          CustomPaint(
                                            size: const Size(10, 6),
                                            painter: _MyCustomPainter(controller.type.value == 4),
                                          ),
                                        ],
                                      ),
                                    ),
                                    alignment: PlaceholderAlignment.middle)
                              ]))),
                    ),
                  )),
                  Expanded(
                      child: Container(
                    alignment: Alignment.centerRight,
                    padding: EdgeInsets.only(right: 15.w),
                    child: Obx(() => IconButton(
                        onPressed: () {
                          controller.isPai.value = !controller.isPai.value;
                        },
                        icon: SvgUtils.assetName(controller.isPai.isTrue ? 'u3454' : 'u3455',
                            width: 20, height: 19))),
                  ))
                ],
              ),
            )),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 10.w),
        child: Obx(() {
          if (controller.isPai.isTrue) {
            return Column(
              children: [
                for (var i = 0; i < 45; i++)
                  InkWell(
                    onTap: () {
                      Get.toNamed(RoutePath.productNormalInfo);
                    },
                    child: Container(
                      margin: EdgeInsets.only(bottom: 15.h),
                      child: Row(
                        children: [
                          CachedNetworkImage(
                            imageUrl:
                                'https://img10.360buyimg.com/mobilecms/s230x230_jfs/t1/223657/28/31706/59671/664344c3Fafdbc368/20c3aaf6378cb7c1.jpg!cc_230x230!q70.dpg.webp',
                            height: 90,
                            width: 130,
                            fit: BoxFit.fill,
                          ),
                          Expanded(
                              child: Padding(
                            padding: EdgeInsets.only(left: 10.w, right: 5.w),
                            child: ListBody(
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '荣耀10青春版',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 15.h, bottom: 10.h),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    '￥ 1299.00',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorF048),
                                  ),
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text.rich(TextSpan(children: [
                                      TextSpan(
                                          text: '已出售:',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color6666)),
                                      TextSpan(
                                          text: '125',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333)),
                                      TextSpan(
                                          text: '件',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color6666))
                                    ])),
                                    Text.rich(TextSpan(children: [
                                      TextSpan(
                                          text: '1253',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333)),
                                      TextSpan(
                                          text: '评价',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color6666)),
                                    ])),
                                  ],
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    ),
                  ),
              ],
            );
          }
          return StaggeredGrid.count(
            crossAxisCount: 2,
            crossAxisSpacing: 15,
            mainAxisSpacing: 20,
            children: [
              for (var i = 0; i < 45; i++)
                Column(
                  children: [
                    CachedNetworkImage(
                      imageUrl:
                          'https://img10.360buyimg.com/mobilecms/s230x230_jfs/t1/223657/28/31706/59671/664344c3Fafdbc368/20c3aaf6378cb7c1.jpg!cc_230x230!q70.dpg.webp',
                      height: 116,
                      width: double.infinity,
                      fit: BoxFit.fill,
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 5.h),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '荣耀10青春版',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 15.h, bottom: 10.h),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '￥ 1299.00',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.colorF048),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text.rich(TextSpan(children: [
                          TextSpan(
                              text: '已出售:',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color6666)),
                          TextSpan(
                              text: '125',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color3333)),
                          TextSpan(
                              text: '件',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color6666))
                        ])),
                        Text.rich(TextSpan(children: [
                          TextSpan(
                              text: '1253',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color3333)),
                          TextSpan(
                              text: '评价',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color6666)),
                        ])),
                      ],
                    )
                  ],
                ),
            ],
          );
        }),
      ),
    );
  }
}

class _MyCustomPainter extends CustomPainter {
  final bool result;
  final bool isUp;

  _MyCustomPainter(this.result, [this.isUp = false]);

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    if (isUp) {
      path.moveTo(0, size.height);
      path.lineTo(size.width, size.height);
      path.lineTo(size.width / 2, size.height / 2);
    } else {
      path.moveTo(0, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width / 2, size.height / 2);
    }
    path.close();
    Paint paint = Paint()
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.square
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color6666);
    if (result) {
      paint.color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048);
    }
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
